<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>放映日程</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled" th:href="@{/me}">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1" th:text="${user.getUsername()}"></span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" th:href="@{/showing}">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映日程</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-film"></i>
        <span class="ms-1">热映电影</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/my-tickets}">
        <i class="bi bi-wallet2"></i>
        <span class="ms-1">我的影票</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="d-flex flex-column gap-4">
  <div th:each="group : ${groups}" class="container-fluid px-5 py-3">
    <p class="h2 mb-3" th:text="${group.getKey()}"></p>
    <div class="d-flex flex-wrap gap-3">
      <div class="card w-25" th:each="screening : ${group.getValue()}">
        <div class="card-body clearfix">
          <a class="btn btn-outline-secondary float-end"
             th:href="@{/buy-ticket(screeningId=${screening.getId()})}"><i class="bi bi-ticket"></i></a>
          <h3 class="card-title mb-3" th:text="${screening.getMovie().getTitle()}"></h3>
          <h5 class="card-text d-flex flex-wrap align-items-center">
            <span th:text="${screening.getStartTime().toLocalTime()}"></span>
            <span> - </span>
            <span th:text="${screening.getEndTime().toLocalTime()}"></span>
            <span class="ms-2" th:text="${screening.getHall().getName()}"></span>
            <span class="ms-auto">￥<span class="h5" th:text="${screening.formatPrice()}">
            </span></span>
          </h5>
        </div>
      </div>
    </div>
  </div>
</main>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>

</script>
</body>
</html>